import { useState } from 'react'
import { Outlet, useLocation, useNavigate } from 'react-router-dom'
import {
  LayoutDashboard,
  TrendingUp,
  Shield,
  UserX,
  Users,
  FileText,
  Settings,
  ChevronLeft,
  Bell,
  LogOut,
} from 'lucide-react'
import { Button } from '@/components/ui/button'

interface MenuItem {
  key: string
  label: string
  icon: React.ReactNode
  path: string
}

const menuItems: MenuItem[] = [
  {
    key: 'dashboard',
    label: '仪表盘',
    icon: <LayoutDashboard size={20} />,
    path: '/',
  },
  {
    key: 'financing',
    label: '融资数据',
    icon: <TrendingUp size={20} />,
    path: '/financing',
  },
  {
    key: 'authentication',
    label: '认证管理',
    icon: <Shield size={20} />,
    path: '/authentication',
  },
  {
    key: 'blacklist',
    label: '黑名单管理',
    icon: <UserX size={20} />,
    path: '/blacklist',
  },
  {
    key: 'users',
    label: '用户管理',
    icon: <Users size={20} />,
    path: '/users',
  },
  {
    key: 'reports',
    label: '报表管理',
    icon: <FileText size={20} />,
    path: '/reports',
  },
  {
    key: 'settings',
    label: '系统设置',
    icon: <Settings size={20} />,
    path: '/settings',
  },
]

const MainLayout = () => {
  const [collapsed, setCollapsed] = useState(false)
  const location = useLocation()
  const navigate = useNavigate()

  const handleMenuClick = (path: string) => {
    navigate(path)
  }

  return (
    <div className="flex h-screen overflow-hidden bg-gray-50">
      {/* 侧边栏 */}
      <aside
        className={`${
          collapsed ? 'w-16' : 'w-64'
        } flex flex-col border-r border-gray-200 bg-white shadow-sm transition-all duration-300 overflow-hidden`}
      >
        {/* Logo区域 */}
        <div className="flex h-16 items-center border-b border-gray-200 px-4 flex-shrink-0">
          <div className="flex items-center space-x-2 min-w-0">
            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 text-white font-bold flex-shrink-0">
              管
            </div>
            <span
              className={`text-lg font-semibold text-gray-800 whitespace-nowrap transition-all duration-300 ${
                collapsed ? 'opacity-0 w-0' : 'opacity-100 w-auto'
              }`}
            >
              管理后台
            </span>
          </div>
        </div>

        {/* 导航菜单 */}
        <nav className="flex-1 space-y-1 overflow-y-auto px-2 py-4">
          {menuItems.map((item) => {
            const isActive = location.pathname === item.path
            return (
              <button
                key={item.key}
                onClick={() => handleMenuClick(item.path)}
                className={`${
                  isActive
                    ? 'bg-blue-50 text-blue-600 font-medium'
                    : 'text-gray-700 hover:bg-gray-50'
                } group flex w-full items-center rounded-lg px-3 py-2.5 text-sm transition-all duration-200 overflow-hidden`}
              >
                <span
                  className={`${
                    isActive ? 'text-blue-600' : 'text-gray-500'
                  } transition-colors flex-shrink-0`}
                >
                  {item.icon}
                </span>
                <span
                  className={`ml-3 flex-1 text-left whitespace-nowrap transition-all duration-300 ${
                    collapsed ? 'opacity-0 w-0 ml-0' : 'opacity-100 w-auto ml-3'
                  }`}
                >
                  {item.label}
                </span>
                <div
                  className={`h-1.5 w-1.5 rounded-full bg-blue-600 transition-all duration-300 ${
                    collapsed || !isActive ? 'opacity-0 w-0' : 'opacity-100 w-1.5'
                  }`}
                />
              </button>
            )
          })}
        </nav>

        {/* 折叠按钮 */}
        <div className="border-t border-gray-200 p-2 flex-shrink-0">
          <Button
            variant="ghost"
            size="sm"
            onClick={() => setCollapsed(!collapsed)}
            className="w-full justify-center overflow-hidden"
          >
            <ChevronLeft
              size={18}
              className={`transition-transform duration-300 flex-shrink-0 ${
                collapsed ? 'rotate-180' : 'rotate-0'
              }`}
            />
            <span
              className={`ml-2 whitespace-nowrap transition-all duration-300 ${
                collapsed ? 'opacity-0 w-0 ml-0' : 'opacity-100 w-auto ml-2'
              }`}
            >
              收起
            </span>
          </Button>
        </div>
      </aside>

      {/* 主内容区 */}
      <div className="flex flex-1 flex-col overflow-hidden">
        {/* 顶部栏 */}
        <header className="flex h-16 items-center justify-between border-b border-gray-200 bg-white px-6 shadow-sm">
          <div className="text-lg font-semibold text-gray-800">
            金融平台管理后台
          </div>

          {/* 右侧功能区 */}
          <div className="flex items-center space-x-4">
            {/* 通知 */}
            <Button variant="ghost" size="icon" className="relative">
              <Bell size={20} />
              <span className="absolute right-1 top-1 h-2 w-2 rounded-full bg-red-500" />
            </Button>

            {/* 管理员信息 */}
            <div className="flex items-center space-x-3 border-l border-gray-200 pl-4">
              <div className="text-right">
                <div className="text-sm font-medium text-gray-900">
                  管理员
                </div>
                <div className="text-xs text-gray-500">Admin</div>
              </div>
              <div className="h-9 w-9 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center text-white font-medium">
                A
              </div>
            </div>

            {/* 退出 */}
            <Button variant="ghost" size="icon">
              <LogOut size={20} />
            </Button>
          </div>
        </header>

        {/* 主内容区域 */}
        <main className="flex-1 overflow-y-auto bg-gray-50 p-6">
          <Outlet />
        </main>
      </div>
    </div>
  )
}

export default MainLayout
